<script lang="ts">
export default {
  name: 'manage',
};
</script>

<script lang="ts" setup>

import {onMounted, reactive, ref} from 'vue';
import {ElMessage, ElMessageBox} from "element-plus";

import EntityTable from './components/EntityTable.vue';
import EntityHeader from './components/EntityHeader.vue';
import EntityDialog from './components/EntityDialog.vue';
import MemberDialog from './components/MemberDialog.vue';


// 引入设备的API和数据类型
import {
  CreateRepoGroupRequestVO,
  RepoGroupQueryParam,
} from '@/api/cloud/repository/repogroup/types';
import {
  createRepoGroupEntity, deleteRepoGroupEntity,
  deleteRepoGroupMember,
  insertRepoGroupMember
} from "@/api/cloud/repository/repogroup";

const entityTableRef = ref<any>(); // 这了的变量名称必须和<console-edit-dialog>的ref值一样
const entityHeaderRef = ref<any>(); // 这了的变量名称必须和<console-edit-dialog>的ref值一样
const entityDialogRef = ref<any>(); // 这了的变量名称必须和<console-edit-dialog>的ref值一样
const memberDialogRef = ref<any>(); // 这了的变量名称必须和<console-edit-dialog>的ref值一样

const dataState = reactive({
  // 查询参数
  queryParams: {pageNum: 1, pageSize: 10} as RepoGroupQueryParam,
  // 对话框状态
  editGroupDialog: {
    visible: false,
  },
  // 对话框状态
  editMemberDialog: {
    visible: false,
  },
});

function handleCreateDialog(source: string, type: any) {
  // 创建对话框
  if (source === 'header' && type === 'create') {
    dataState.editGroupDialog.visible = true;
    entityDialogRef.value.initEditData(type, undefined);
    return;
  }
}

async function handleInsertMemberDialog(source: any) {
  // 创建对话框
  dataState.editMemberDialog.visible = true;
  memberDialogRef.value.initEditData(source.id);
}

/**
 * 捕获来自对话框的创建操作
 * @taskParam value
 */
async function handleMemberCreate(value: any) {

  let formData = {
    id: value.id,
    member: value.member,
  }

  if (formData.id === undefined) {
    return;
  }
  if (formData.id === '') {
    return;
  }

  await insertRepoGroupMember(formData).then(() => {
    ElMessage.success('新增成功');
    // 隐藏对话框
    dataState.editMemberDialog.visible = false;
    // 刷新表单
    entityTableRef.value.refreshTable(dataState.queryParams);
  })
}


function handleDeleteMemberDialog(source: any) {
  let data = {} as CreateRepoGroupRequestVO;
  data.member = source.member;
  data.id = source.id;

  ElMessageBox.confirm('确认删除?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    deleteRepoGroupMember(data).then(() => {
      ElMessage.success('删除成功');
      // 刷新表单
      entityTableRef.value.refreshTable(dataState.queryParams);
    });
  })
      .catch(() => ElMessage.info('已取消删除'));

}

function handleDeleteGroupDialog(source: any) {

  let data = {} as CreateRepoGroupRequestVO;
  data.id = source.id;

  ElMessageBox.confirm('确认删除?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    deleteRepoGroupEntity(data).then(() => {
      ElMessage.success('删除成功');
      // 刷新表单
      entityTableRef.value.refreshTable(dataState.queryParams);
    });
  })
      .catch(() => ElMessage.info('已取消删除'));

}

/**
 * 捕获来自对话框的创建操作
 * @taskParam value
 */
async function handleGroupCreate(value: any) {
  let formData = {
    groupName: value.groupName,
    description: value.description,
  }

  await createRepoGroupEntity(formData).then(() => {
    ElMessage.success('新增成功');
    // 隐藏对话框
    dataState.editGroupDialog.visible = false;
    // 刷新表单
    entityTableRef.value.refreshTable(dataState.queryParams);
  })
}

/**
 * 捕获对话框的取消操作
 * @taskParam value
 */
function handleGroupCancel() {
  // 隐藏对话框
  dataState.editGroupDialog.visible = false;
}

/**
 * 捕获对话框的取消操作
 * @taskParam value
 */
function handleMemberCancel() {
  // 隐藏对话框
  dataState.editMemberDialog.visible = false;
}

/**
 * 响应查询按钮：页查询数据
 */
function handleQuery(source: string, value: any) {
  dataState.queryParams = value;
  entityTableRef.value.refreshTable(dataState.queryParams);
}

/**
 * 响应页面安装：页面的初始化工作
 */
onMounted(() => {
});
</script>

<template>
  <div class="app-container">

    <!-- 表单头：各种按钮 -->
    <entity-header ref="entityHeaderRef"
                              @create="handleCreateDialog"
                              @query="handleQuery"
    />

    <!-- 数据表单：创建/修改 -->
    <entity-table ref="entityTableRef"
                             @deleteGroup="handleDeleteGroupDialog"
                             @deleteMember="handleDeleteMemberDialog"
                             @insertMember="handleInsertMemberDialog"
    />

    <!-- 设备编辑对话框：创建/修改 -->
    <entity-dialog ref="entityDialogRef" v-model:visible="dataState.editGroupDialog.visible"
                              @cancel="handleGroupCancel"
                              @create="handleGroupCreate"
    />

    <!-- 设备编辑对话框：创建/修改 -->
    <member-dialog ref="memberDialogRef" v-model:visible="dataState.editMemberDialog.visible"
                              @cancel="handleMemberCancel"
                              @create="handleMemberCreate"
    />
  </div>
</template>
